<template>
  <view>
    <view>
      <at-search-bar
        placeholder="输入关键词搜索"
        :value="value1"
        @change="onChange('value1', $event)"
        @action-click="onActionClick('value1')"
      />
    </view>

    <panel class="panel__content"  style="margin:10px">
      <example-item>
        <at-flex wrap="wrap">
          <at-flex-item
            :size="5"
            v-for="(item ,idx) in imgUrls "
            :key="idx"
            style="margin-bottom:20px; margin-right:20px;"
          >
            <image :src="item" style="width:100%; height:100px;" />
            <view>
              <view class="text">名称：</view>
              <view class="text">¥ 800</view>
            </view>
          </at-flex-item>
        </at-flex>
      </example-item>
    </panel>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import './index.scss'
interface IndexState {
  [key: string]: string
}

interface SwiperPageState {
  
  imgUrls: string[]
}

export default defineComponent({
  name: 'Search',

  setup() {
    const searchValue = reactive<IndexState>({
      value1: ''
    })

    const swiperPageState = reactive<SwiperPageState>({
      imgUrls: [
        'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
        'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
        'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180',
        'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
        'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
        'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180'
      ]
    })

    onMounted(() => {
      searchValue.value1 = Taro.Current!.router!.params.id as string
      searchValue.value1 && onActionClick('value1')
    })

    function onActionClick(stateName: string): void {
      Taro.showToast({
        title: `${searchValue[stateName]}`,
        icon: 'success',
        duration: 2000
      })
    }

    function onChange(stateName: string, value: string | number): void {
      searchValue[stateName] = value as string
    }

    return {
      ...toRefs(searchValue),
      ...toRefs(swiperPageState),
      onChange,
      onActionClick
    }
  }
})
</script>

